<template>
  <div>
    <!-- 城市列表 -->
  <van-nav-bar title="地图找房" left-arrow @click-left="onClickLeft" />

  <!-- 地图 -->
  <baidu-map class="map"  :zoom="11" @ready="initmap">
     <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM _RIGHT"></bm-navigation>
  <bm-overlay
    v-for="(item,index) in list"
    :key="index"
    pane="labelPane"
    class="sample"
    @draw="draw($event,item.coord)"
    >
    <div class="fz" @click="FunDate(item.value)">{{item.label}}<p>{{item.count}}套</p></div>
  </bm-overlay>
</baidu-map>;
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'ZufangMapSearch',

  data () {
    return {
      name: '',
      city: this.$store.state.user.dizhi,
      address: this.$store.state.user.name1,
      list: []

    }
  },
  created () {
    this.name = this.$route.query.name
    this.getname1()
  },
  mounted () {

  },

  methods: {
    // 跳转首页
    onClickLeft () {
      if (this.name === 'home') {
        this.$router.push('/home')
      } else {
        this.$router.push('/home/find')
      }
    },
    // 确认城市
    initmap ({ BMap, map }) {
      const myGeo = new BMap.Geocoder()
      myGeo.getPoint(this.city, function (point) {
        if (point) {
          // console.log(point)
          map.centerAndZoom(point, 11)
        }
      }, this.city)
    },
    // 地图遮罩层
    draw ({ el, BMap, map }, { latitude, longitude }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    // 请求数据
    async getname1 () {
      const red = await request({
        url: `/area/map?id=${this.address}`
      })
      // console.log(this.address)
      // console.log(red.body)
      this.list = red.body
    },
    // 请求区的地址
    async FunDate (val) {
      global.alert(1)
      console.log(1)
      if (val) {
        const red = await request({
          url: `/area/map?id=${val}`
        })
        console.log(red)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  width: 100%;
  height: 620px;
}
.sample {
  width: 70px;
  height: 70px;
  border-radius: 40px;
  background: rgba(35, 187, 120, 0.9);
  overflow: hidden;
  border: solid 2px #fff;
  color: #fff;
  text-align: center;
  padding: 10px;
  pointer-events:auto;
  position: absolute;
}
.fz{
  font-size: 12px;
  height: 100%;
  width: 100%;
}
</style>
